<template>
  <el-card class="warningContent">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="学员欠费" name="first">
        <el-row :gutter="10">
          <el-col :span="5">
            <div class="order">
              <div class="orderTitle">订单号</div>
              <el-input v-model="orderId" placeholder="请输入订单号" />
            </div>
          </el-col>
          <el-col :span="6">
            <div class="order">
              <div class="handleDateTitle">经办日期</div>
              <el-date-picker
                v-model="handleDate"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :size="size"
              />
            </div>
          </el-col>
          <el-col :span="3">
            <el-button>重置</el-button>
            <el-button type="primary">查询</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-button class="batchSend" size="small">批量发送欠费提醒</el-button>
        </el-row>
        <el-row>
          <el-table
            :data="orderDataList"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="50" />
            <el-table-column prop="order_no" label="订单号" width="150" />
            <el-table-column prop="student_name" label="学员姓名" width="100" />
            <el-table-column
              prop="student_mobile"
              label="学员手机号"
              width="100"
            />
            <el-table-column prop="course_name" label="购买项目" width="300" />
            <el-table-column
              prop="receivable_amount"
              label="应收金额"
              width="100"
            />
            <el-table-column
              prop="received_amount"
              label="实收金额"
              width="100"
            />
            <el-table-column prop="bonus_points" label="赠送积分" width="100" />
            <el-table-column prop="owner_name" label="业绩归属人" width="100" />
            <el-table-column prop="operator_name" label="经办人" width="100" />
            <el-table-column prop="operator_name" label="经办人" width="100" />
            <el-table-column prop="order_date" label="经办日期" width="100" />
            <el-table-column label="处理状态" width="100">
              <template #default="scope">
                <el-button type="danger" plain size="small">{{
                  scope.row.operation_status
                }}</el-button>
              </template> </el-table-column
            >>
            <el-table-column fixed="right" label="操作" width="100">
              <template #default>
                <el-button link type="primary" size="small">继续收款</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <div class="pagebox">
          <el-button size="small" @click="exportData">导出当前页</el-button>
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 20, 30]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="orderDataNum"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="续费预警" name="second">Config</el-tab-pane>
      <el-tab-pane label="库存不足" name="third">Role</el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from "vue";
import orderData from "@/Mock/orderDataList.json";
import ExportJsonExcel from "js-export-excel";

const activeName = ref("first");

const handleClick = (tab, event) => {
  console.log(tab, event);
};

//订单号
let orderId = ref("");

//经办日期
let handleDate = ref("");

//订单数据
let orderDataList = ref([]);
let orderDataNum = ref(0);
onMounted(() => {
  getNewList();
  orderDataNum.value = orderData.length;
});

const handleSelectionChange = () => {};

//当前页码
let currentPage = ref(1);

//页面大小
let pageSize = ref(5);

const handleSizeChange = (value) => {
  currentPage.value = value;
};

const handleCurrentChange = (value) => {
  currentPage.value = value;

  getNewList();
};

//获取页面新数据
const getNewList = () => {
  orderDataList.value = orderData.slice(
    pageSize.value * (currentPage.value - 1),
    pageSize.value * currentPage.value
  );
};

//导出页面数据
const exportData = () => {
  let option = {
    fileName: "学员欠费信息列表", // 导出的文件的名称
    datas: [
      {
        sheetData: orderData, // 表格数据
        sheetName: "学员欠费信息列表", // excel表格中表格的名字
        sheetFilter: [
          "order_no",
          "student_name",
          "student_mobile",
          "course_name",
          "receivable_amount",
          "received_amount",
          "bonus_points",
          "owner_name",
          "operator_name",
          "order_date",
          "operation_status",
        ], // 需要导出的数据的字段
        sheetHeader: [
          "订单号",
          "学员姓名",
          "学员手机号",
          "购买项目",
          "应收金额",
          "实收金额",
          "赠送积分",
          "业绩归属人",
          "经办人",
          "经办日期",
          "订单状态",
        ], // 表头的值
        columnWidths: [10, 10],
      },
    ],
  };
  var toExcel = new ExportJsonExcel(option); //new
  toExcel.saveExcel(); //保存
};
</script>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.order {
  display: flex;
  align-items: center;
  .orderTitle {
    width: 80px;
  }
}
.warningContent {
  font-size: 14px;
  .handleDateTitle {
    width: 100px;
  }
  .batchSend {
    margin: 20px 0 5px 0;
  }
  .pagebox {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
